<template lang="pug">
	view.page
		navbar(@height="height" :type="type")
			view.flex.at.jt(slot="header" style="height:100%")
				view.w50(style="text-align: center") 国科特膳大养堂-医生端
		//- 模块1
		view(:style="{'background': 'url('+img+') 100% 100%','paddingTop':(h+30)+'px','background-size': '100% 100%'}" style="padding-bottom:60px")
			view.bg
				view.Icontent
					view.flex.at.bg(@click="gourl('/pages/fetail/fetail')")
						image.Image(
							src="http://img.duoziwang.com/2018/06/2018010130169489.jpg",
							mode="widthFix"
						)
						view
							view.f16.cf 林婉
							view.f12.y 平台审核信息中
						view.ml.butt.flex
							view.l1(:class="num==0 ? 'active' : ''" @click.stop="select(0)") 接单中
							view.l1(:class="num==1 ? 'active' : ''" @click.stop="select(1)") 暂停中
					view.flex.bg
						view.w33.ct(v-for = "item,index in list")
							view.f16.cf {{item.num}}
							view.f12.cf {{item.name}}
					view.flex.at.bg1.f14.cf
						view HI，欢迎登录国科特膳大养堂
						view.ml
							image.log(
								src="http://img.duoziwang.com/2018/06/2018010130169489.jpg",
								mode="widthFix"
							)
		//- 模块2
		view.bg.flex.f14.ct(style="margin-top:-50px")
			view.w33.por(v-for="item,index in tablist" @click="selectTab(index)" :class="taninx==index?'tabactive':''") {{item}}
		view.bg
			view.bga.flex.bg.at.mt10.list(v-for="item,index in datalist" v-if="taninx==0")
				view.adg 1
				image.Image(
					src="http://img.duoziwang.com/2018/06/2018010130169489.jpg",
					mode="widthFix"
				)
				view
					view.f16.c3 王亚梅
					view.f12.mt10.c6 可以多喝热水，平时多调整调整心...
			view.bga.flex.bg.at.mt10.list(v-for="item,index in datalist" @click="gourl('/pages/index/Patient')" v-if="taninx==1")
				image.Image(
					src="http://img.duoziwang.com/2018/06/2018010130169489.jpg",
					mode="widthFix"
				)
				view
					view.f16.c3 王亚梅
					view.f12.mt10.c6 进行中	
			view.zw(v-if="datalist.length==0") 暂无数据
			view.bga.bg.at.mt10.list(v-for="item,index in datalist" v-if="taninx==2")
				view.flex
					image.Image(
						src="http://img.duoziwang.com/2018/06/2018010130169489.jpg",
						mode="widthFix",
						style="width:40px"
					)
					view(style="width:100%")
						view.f14.c3.flex.at 王亚梅
							view.ml.f12.c6 2022-3-28
						view.f12.c6.por
							u-rate(
								active-color="#FAC505",
								:count="count",
								v-model="value"
							)
				view.c6.f14(style="padding-left:42px") 张医生很有耐心，有问必答，有求必应，是位好医生。
			view.zw(v-if="datalist.length==0") 暂无数据
</template>

<script>
	import img1 from "@/static/bg2.png"
	import navbar from "@/components/navbar.vue"
	export default {
		components:{
			navbar
		},
		data() {
			return {
				num:0,
				img:img1,
				list:[
					{num:'36',name:'粉丝数'},
					{num:'36',name:'接诊人数'},
					{num:'36',name:'好评率'}
				],
				taninx:0,
				tablist:['进行中','我的病人','患者评价'],
				datalist:[1,2,3],
				type:1,
				h:0,
				count: 5,
				value: 2
			}
		},
		methods: {
			height(e){
				this.h=e
			},
			select(e){
				this.num=e
			},
			selectTab(e){
				this.taninx=e
			},
			onPageScroll(e) {
				console.log(e)
				e.scrollTop>=36?this.type='#B2FDF7':this.type=1
			},
			gourl(e){
				uni.navigateTo({
					url:e
				})
			}
		}
	}
</script>

<style>
.page{
	
}
.list{
	position: relative;
}
.adg{position: absolute;z-index: 1;top: 20px;right: 20px;background:#F93838 ;color: #fff;font-size: 12px;border-radius: 50%;width: 12px;height: 12px;text-align: center;line-height: 12px;}
.Icontent{
	background: #17D2C9;
	border-radius: 12px;
}
.butt{
	background: #fff;
	border-radius: 30px;
}
.active{
	background: #FAC505;
	border-radius: 30px;
	padding:4px 10px;
	color: #fff;
}
.l1{
	padding:4px 10px;
	font-size: 13px;
}
.log{
	width: 30px;
	border-radius: 50%;
}
.bg1{
	background: rgba(255,255,255,0.2);
	padding: 4px 10px;
}
.tabactive{
	color: #17D2C9;
	font-weight: bold;
	font-size: 16px;
}
.tabactive::before {
	content: '';
	position: absolute;
	z-index: 1;
	width: 20%;
	height: 4px;
	background: #17D2C9;
	bottom: -10px;
	left: 40%;
	
}

</style>
